<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>流程权限</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
  <link rel="stylesheet" th:href="@{/style/custom.css}" media="all">
</head>
<body>

<div class="layui-form" lay-filter="candidate-form-edit" id="candidate-form-edit" style="padding: 20px 30px 0 0;">
  <input type="hidden" id="id" name="id" th:value="${candidate.id}">
  <input type="hidden" id="procDefId" name="procDefId" th:value="${candidate.procDefId}">
  <input type="hidden" id="nodeName" name="nodeName" th:value="${candidate.nodeName}">
  <div class="layui-form-item">
    <label class="layui-form-label">流程节点</label>
    <div class="layui-input-block">
      <select name="nodeId" id="nodeId" lay-search lay-filter="nodeId" lay-verify="required">
        <option value="">全部</option>
        <option th:each="obj:${allUserTask}" th:value="${obj.key}" th:text="${obj.value}" th:selected="${obj.key == candidate.nodeId}"></option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
      <label class="layui-form-label">候选人</label>
      <div class="layui-input-block" id="userId">
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
      <label class="layui-form-label">候选岗位</label>
      <div class="layui-input-block" id="postId">
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
      <label class="layui-form-label">候选角色</label>
      <div class="layui-input-block" id="roleId">
      </div>
    </div>
  </div>
  <div class="layui-form-item layui-hide">
    <input type="button" lay-submit lay-filter="LAY-candidate-front-submit" id="LAY-candidate-front-submit" value="确认">
  </div>
</div>

<script th:inline="javascript">
  let userId = [[${candidate.candidateUser}]];
  let postId = [[${candidate.candidatePost}]];
  let roleId = [[${candidate.candidateRole}]];
</script>
<script th:src="@{/layui/layui.js}"></script>
<script>
  layui.config({
    base: '/'
  }).extend({
    xmSelect: 'extend/xm-select/dist/xm-select'
  }).use(['index', 'xmSelect'], function () {
    const $ = layui.$
        , admin = layui.admin
        , form = layui.form
        , table = layui.table
        , dropdown = layui.dropdown
        , xmSelect = layui.xmSelect
        , layer = layui.layer;

    let users;
    if (userId) {
      users = userId.split(',');
    }
    let positions;
    if (postId) {
      positions = postId.split(',');
    }
    let roles;
    if (roleId) {
      roles = roleId.split(',');
    }

    //用户
    let userId_select = xmSelect.render({
      el: '#userId',
      name: 'candidateUser',
      // layVerify: 'required',
      // layVerType: 'msg',
      toolbar: {
        show: true,
        list: ['ALL', 'CLEAR', 'REVERSE']
      },
      filterable: true,
      data: []
    });

    admin.req({
      url: '/sys/user/getSelectList',
      type: 'post',
      done: function (res) {
        userId_select.update({
          data: res.data,
          autoRow: true,
        });
        if (users) {
          userId_select.setValue(users);
        }
      }
    });

    //岗位
    let position_select = xmSelect.render({
      el: '#postId',
      name: 'candidatePost',
      // layVerify: 'required',
      // layVerType: 'msg',
      toolbar: {
        show: true,
        list: ['ALL', 'CLEAR', 'REVERSE']
      },
      filterable: true,
      data: []
    });

    admin.req({
      url: '/sys/position/getSelectList',
      type: 'post',
      done: function (res) {
        position_select.update({
          data: res.data,
          autoRow: true,
        });
        if (positions) {
          position_select.setValue(positions);
        }
      }
    });

    //角色
    let role_select = xmSelect.render({
      el: '#roleId',
      name: 'candidateRole',
      // layVerify: 'required',
      // layVerType: 'msg',
      toolbar: {
        show: true,
        list: ['ALL', 'CLEAR', 'REVERSE']
      },
      filterable: true,
      data: []
    });

    admin.req({
      url: '/sys/role/getSelectList',
      type: 'post',
      done: function (res) {
        role_select.update({
          data: res.data,
          autoRow: true,
        });
        if (roles) {
          role_select.setValue(roles);
        }
      }
    });

    form.on('select(nodeId)', function (data) {
      let selectedText = data.elem[data.elem.selectedIndex].text; // 获取选中的文本
      layui.$("#nodeName").val(selectedText);
    });

    //重置表单 包含有下拉tree需要特殊处理
    layui.$("#LAY-candidate-front-reset").click(function () {
      layui.$("#candidate-form-edit")[0].reset();
      userId_select.setValue(users ? users : []);
      position_select.setValue(positions ? positions : []);
      role_select.setValue(roles ? roles : []);
      form.render();
    });

  });
</script>
</body>
</html>